<template>
  <div>
    <table class="table table-bordered table-vertical-middle text-center" v-loading="loading">
      <thead>
        <tr>
          <th>序号</th>
          <th class="text-left">报表名</th>
          <th>报表说明</th>
          <th>年度</th>
          <th v-if="isReporter">新增</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="report in tableData" :key="report.index">
          <td>{{ report.index }}</td>
          <td class="text-left">{{ report.name }}</td>
          <td class="text-left">{{ report.desc }}</td>
          <td>
            <ul class="list-inline">
              <li class="list-inline-item">
                <el-date-picker
                  class="text-year-picker"
                  v-model="yearDate"
                  type="year"
                  :clearable="false"
                  prefix-icon="el-icon-caret-bottom"
                  :picker-options="pickerOptions"
                  format="更多"
                  placeholder="选择年"
                  @change="setQuarterDisabled(report.index)"
                ></el-date-picker>
              </li>
              <li class="list-inline-item" v-for="(di, i) in report.disabled" :key="`q-${i}`">
                <el-button
                  type="text"
                  :disabled="di"
                  :class="di ? 'text-muted' : ''"
                  @click="handleView(report.index, currentYear - 3 + i)"
                >
                  {{ currentYear - 3 + i }}年
                </el-button>
              </li>
            </ul>
          </td>
          <td v-if="isReporter">
            <el-button type="text" icon="el-icon-plus" @click="handleAdd(report.index)"></el-button>
            <!-- <el-tooltip class="item"
                        effect="dark"
                        placement="bottom"
                        :disabled="!addDisabled">
              <el-button type="text"
                         icon="el-icon-plus"
                         @click="handleAdd(report.index)"></el-button>
              <div slot="content">
                <span>1、只能由报表管理员新增</span><br>
                <span>2、只能在下年一月10号前新增</span>
              </div>
            </el-tooltip> -->
          </td>
        </tr>
      </tbody>
    </table>

    <g1-dialog :visible.sync="g1Visible" :view-mode="g1ViewMode" :query-year="g1Year"></g1-dialog>

    <g2-dialog :visible.sync="g2Visible" :view-mode="g2ViewMode" :query-year="g2Year"></g2-dialog>

    <g3-dialog :visible.sync="g3Visible" :view-mode="g3ViewMode" :query-year="g3Year"></g3-dialog>

    <g4-dialog :visible.sync="g4Visible" :view-mode="g4ViewMode" :query-year="g4Year"></g4-dialog>

    <g5-dialog :visible.sync="g5Visible" :view-mode="g5ViewMode" :query-year="g5Year"></g5-dialog>

    <g6-dialog :visible.sync="g6Visible" :view-mode="g6ViewMode" :query-year="g6Year"></g6-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { isYearDisabled } from '@/credit/views/city/reportCity/manage/year/minxix'
import G1Dialog from '@/credit/views/city/reportCity/manage/year/g1Dialog'
import G2Dialog from '@/credit/views/city/reportCity/manage/year/g2Dialog'
import G3Dialog from '@/credit/views/city/reportCity/manage/year/g3Dialog'
import G4Dialog from '@/credit/views/city/reportCity/manage/year/g4Dialog'
import G5Dialog from '@/credit/views/city/reportCity/manage/year/g5Dialog'
import G6Dialog from '@/credit/views/city/reportCity/manage/year/g6Dialog'

const date = new Date()
const currentYear = date.getFullYear()

export default {
  components: {
    G1Dialog,
    G2Dialog,
    G3Dialog,
    G4Dialog,
    G5Dialog,
    G6Dialog,
  },
  props: {},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return isYearDisabled(time.getFullYear())
        },
      },
      loading: false,

      tableData: [
        {
          index: 1,
          name: '融资担保公司名录',
          desc: '年后1月底前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 2,
          name: '公司及人员情况',
          desc: '年后1月底前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 3,
          name: '资产负债情况',
          desc: '年后1月底前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 4,
          name: '利润情况',
          desc: '年后1月底前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 5,
          name: '担保业务情况',
          desc: '年后1月底前报送',
          disabled: [false, false, false, false],
        },
        {
          index: 6,
          name: '资产比例情况',
          desc: '年后1月底前报送',
          disabled: [false, false, false, false],
        },
      ],

      yearDate: date,
      queryDate: date,
      currentYear,
      g1Visible: false,
      g1ViewMode: true,
      g1Year: currentYear,

      g2Visible: false,
      g2ViewMode: true,
      g2Year: currentYear,

      g3Visible: false,
      g3ViewMode: true,
      g3Year: currentYear,

      g4Visible: false,
      g4ViewMode: true,
      g4Year: currentYear,

      g5Visible: false,
      g5ViewMode: true,
      g5Year: currentYear,

      g6Visible: false,
      g6ViewMode: true,
      g6Year: currentYear,
    }
  },
  computed: {
    ...mapGetters(['user']),
    addDisabled() {
      const date = new Date()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return this.user.isReporter !== 1 || ![1].includes(month) || day > 10
    },
    isReporter() {
      return +this.user.isReporter === 1
    },
  },
  watch: {},
  created() {
    this.setYearDisabled()
  },
  mounted() {},
  methods: {
    setYearDisabled() {
      this.tableData.forEach(it => {
        const disabled = []
        for (let i = 0; i < 4; i++) {
          disabled[i] = isYearDisabled(currentYear - 3 + i)
        }
        it.disabled = disabled
      })
    },
    handleView(reportIndex, year) {
      this[`g${reportIndex}Year`] = year
      this[`g${reportIndex}Visible`] = true
      this[`g${reportIndex}ViewMode`] = true
    },

    handleAdd(reportIndex) {
      // if (this.addDisabled) {
      //   return // this.$message.error('不能新增报表')
      // }

      const year = date.getFullYear()
      const month = date.getMonth() + 1

      this[`g${reportIndex}Year`] = month < 2 ? year - 1 : year
      this[`g${reportIndex}Visible`] = true
      this[`g${reportIndex}ViewMode`] = false
    },

    setQuarterDisabled(reportIndex) {
      this.handleView(reportIndex, this.yearDate.getFullYear())
    },
  },
}
</script>

<style lang="scss" scoped>
.text-year-picker {
  width: 52px;
  /deep/ .el-input__inner {
    border: none;
    padding: 0 2px;
    &:focus {
      box-shadow: none;
    }
  }
  /deep/ .el-input__prefix {
    left: auto;
    right: 5px;
  }
}
</style>
